var rocket = document.querySelector(".rocket"),
  section = document.querySelector("section"),
  scroll = 0,
  timer = null,
  isClick = true;

window.addEventListener("scroll", dis_scroll);

function dis_scroll() {
  scroll = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
  // console.log(scroll);
  if (scroll > 400) {
    rocket.style.display = "block";
  } else {
    rocket.style.display = "none";
  }
}

rocket.addEventListener("click", function () {
  if (isClick) {
    window.removeEventListener("scroll", dis_scroll);
    section.addEventListener("mousewheel", scrollFunc);
    isClick = false;
    rocket.classList.add("active");
    rocket.style.cursor = "not-allowed";
    var scrollTop = document.documentElement.scrollTop;
    var rocketTop = rocket.offsetTop + rocket.clientHeight;
    var septs1 = scrollTop / 50;
    var septs2 = rocketTop / 50;
    // console.log(rocket.clientHeight)
    rocket.style.top = getComputedStyle(rocket).top;
    timer = setInterval(() => {
      document.documentElement.scrollTop -= septs1;
      rocket.style.top = `${rocket.style.top.replace("px", "") - septs2}px`;
      // console.log(rocket.style.top)

      if (document.documentElement.scrollTop <= 0) {
        clearInterval(timer);
        rocket.style.cursor = "pointer";
        isClick = true;
        rocket.classList.remove("active");
        rocket.style.display = "none";
        rocket.style.top = "";
        window.addEventListener("scroll", dis_scroll);
        section.removeEventListener("mousewheel",scrollFunc);
      }
    }, 20);
  }
})

function scrollFunc(e) {
  e = e || window.e;
  if (e.preventDefault) {
    e.preventDefault();
    e.stopPropagation();
  } else {
    e.cancelBubble = true;
    e.returnValue = false;
  }
  return false;
}


// 1.当滚动条(scrollTop)>400展示火箭
// 2.点击火箭,火箭和滚动条同时升空,总时间1s
// 3.火箭过程中,不能再次点击
// 4.可以多次使用火箭升空回到顶部
// 5.升级题,升空过程中如何禁用鼠标滚动功能